<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">todolist</block>
		</cu-custom>
		<view class="todo">
			<view class="todotitle">
				备忘录
			</view>
			<view class="attention">长按可删除待办</view>
			<view class="body">
				<view class="body_title">
					<view class="left">{{todolist.length}}项待办</view>
					<view class="right">
						<van-icon name="plus" class="icon" @click='addtodo' />
						<van-icon name="setting-o" />
					</view>
				</view>
				<view class="body_content">
					<view v-for="(todo,index) in todolist" :key="index" class='todocontent'
						@touchstart.prevent="touchstart(index)" @touchend.prevent="touchend">
						<view class="big">
							<view class="box1">
								<van-checkbox :value="todo.ischecked" @change="Change($event,index)"></van-checkbox>
								<view :class="['small', {'active': todo.ischecked}]" @click='openupdate(index)'>
									{{todo.todocontent}}
								</view>
							</view>
							<view class="todotime" v-if="todo.time">{{todo.time}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="addlist">
				<van-popup :show="show" position="bottom" :round="true" custom-style='height:400rpx'>
					<view class="switch__title">
						<van-icon name="cross" size='50rpx' class="cancel" @click='onclose' />
						<view class="title">新建待办</view>
						<van-icon name="success" size='50rpx' class="success" @click='save' />
					</view>
					<view class="switch__content">
						<van-field :value="value" :border='false' placeholder="添加事项" @change="onChange"
							:auto-focus='true'
							custom-style="border: 1px solid #eee;border-radius: 20rpx; margin:30rpx;width:90%" />
						<view style="display: flex; align-items: center;">
							<van-icon name="clock-o" size="50rpx" style="margin-left: 30rpx;" @click="showtime" />
							<uni-tag :inverted="true" :text="Alltime" type="primary" v-if="istime"
								style="margin-left: 30rpx;" />
						</view>
					</view>

				</van-popup>
				<view class="addlist">
					<van-popup :show="show1" position="bottom" :round="true" custom-style='height:400rpx'>
						<view class="switch__title">
							<van-icon name="cross" size='50rpx' class="cancel" @click='updateclose' />
							<view class="title">编辑待办</view>
							<van-icon name="success" size='50rpx' class="success" @click='updatesave' />
						</view>
						<view class="switch__content">
							<van-field :value="value1" :border='false' placeholder="添加事项" @change="updateChange"
								:auto-focus='true' :adjust-position='false'
								custom-style="border: 1px solid #eee;border-radius: 20rpx; margin:30rpx;width:90%" />
						</view>

					</van-popup>
				</view>
			</view>
			<view class="addtime">
				<van-popup :show="show2" position="bottom" :round="true"
					custom-style='height:1000rpx;background-color: #f4f5f9;'>
					<view class="title">
						<van-icon name="cross" size='50rpx' class="cancel" @click='closetime' />
						<view class="smalltitle">设置提醒时间</view>
						<van-icon name="success" size='50rpx' class="success" @click='updatetime' />
					</view>
					<view class="content">
						<view class="type">
							<view class="text">提醒时间</view>
							<view class="choose">
								<view :class=" ['date', {'clickone': 0===active}]" @click="choosedate">{{date}}</view>
								<view :class=" ['time', {'clickone': 1===active}]" @click="choosetime">{{daytime}}
								</view>
							</view>

						</view>
						<view v-if='!active' class="calendar">
							<uni-calendar :insert="true" @change="change" />
						</view>
						<view v-else class="picker">
							<van-datetime-picker type="time" @input="onInputtime" :value='daytime'
								cancel-button-text=' ' visible-item-count=3 confirm-button-text=' ' />
						</view>
					</view>
				</van-popup>
			</view>

		</view>
	</view>
	</view>

</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_todo', ['todolist']),
			...mapState('m_user', ['token']),
			date() {
				return this.year + "年" + this.month + "月" + this.day + "日"
			},
			daytime() {
				this.minute = this.minute.toString().padStart(2, '0');
				return this.hour + ":" + this.minute
			},
			Alltime() {
				return this.date + " " + this.daytime
			}
		},
		onLoad() {
			if (!this.todolist.length) this.gettodolist()
		},
		data() {
			return {
				show: false, //展示新建待办
				show1: false, //编辑待办
				show2: false, //设置提醒时间
				value: '',
				value1: '',
				valuedate: '',
				second: 2,
				index: 0,
				year: new Date().getFullYear(), // 年
				month: new Date().getMonth() + 1, // 月（注意要加1）
				day: new Date().getDate(), // 日
				hour: new Date().getHours(), // 小时
				minute: new Date().getMinutes(), // 分钟
				active: 0,
				istime: false, //是否有提醒时间
				Loop:''
			};
		},
		methods: {
			...mapMutations('m_todo', ['updatetodolist']),
			touchstart(index) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条待办吗？',
						success: async (res)=> {
							let array =[...this.todolist]
							array.splice(index,1)
							if (res.confirm) {
								const result = await uni.$http.post('/update/updatetodolist', {
									todolist: array
								})
								if (result.data.status === 0) {
									this.updatetodolist(array)
									uni.showToast({
										title: '删除成功',
										duration: 2000
									})
								}else{
									uni.showToast({
										title: '删除失败',
										duration: 2000
									})
								}
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消删除',
									duration: 2000
								})
							}
						}
					});
				}.bind(this), 1000);
			},

			touchend() {
				clearInterval(this.Loop);
			},
			Subscribe() {
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['N_TKd9edxczwY3yUh_YpR7ZHvcZj3N6B1hVdnz6XtFE'],
					success(res) {
						console.log(res)
					}
				})
			},
			async gettodolist() {
				const data = await uni.$http.get('/get/gettodolist')
				if (data.data.status === 0) {
					this.updatetodolist(data.data.data)
				}
			},
			async Change(e, index) {
				this.todolist[index].ischecked = e.detail
				const result = await uni.$http.post('/update/updatetodolist', {
					todolist: this.todolist
				})
				if (result.data.status === 0) {
					this.updatetodolist(this.todolist)
				}
			},
			onChange(e) {
				this.value = e.detail

			},
			onclose() {
				this.show = false
				this.value = ''
			},
			addtodo() {
				this.show = true
				this.istime = false
			},

			//微信订阅版本
			// async save() {
			// 	let data = {},
			// 		code = ''
			// 	if (this.istime) {
			// 		uni.requestSubscribeMessage({
			// 			//此处填写刚才申请模板的模板ID
			// 			tmplIds: ['mgg7nE0jRdaUUwI2KFRVMpdSg-Sehj-Lv8nB55eOOJQ'],
			// 			success: (res) => {
			// 				console.log(res)
			// 				if (res[Object.getOwnPropertyNames(res)[0]] == 'accept') {
			// 					data = {
			// 						ischecked: false,
			// 						todocontent: this.value,
			// 						time: this.Alltime,
			// 						flag: true
			// 					}
			// 				} else {
			// 					data = {
			// 						ischecked: false,
			// 						todocontent: this.value,
			// 						time: this.Alltime,
			// 						flag: false
			// 					}
			// 				}

			// 				// 执行后续代码
			// 				this.continueExecution(data);
			// 			}
			// 		})
			// 	} else {
			// 		data = {
			// 			ischecked: false,
			// 			todocontent: this.value
			// 		}
			// 		this.continueExecution(data);
			// 	}



			// },
			// // 后续代码的执行函数
			// async continueExecution(data) {
			// 	this.todolist.push(data);
			// 	const result = await uni.$http.post('/update/updatetodolist', {
			// 		token: this.token,
			// 		todolist: this.todolist
			// 	});

			// 	if (result.data.status === 0) {
			// 		this.updatetodolist(this.todolist);
			// 		this.value = '';
			// 		const timer = setInterval(() => {
			// 			this.second--;
			// 			uni.showToast({
			// 				title: '添加成功!',
			// 				icon: 'success',
			// 				duration: 1000
			// 			});
			// 			if (this.second <= 0) {
			// 				clearInterval(timer);
			// 				this.show = false;
			// 				return;
			// 			}
			// 			uni.showToast({
			// 				title: '添加成功！',
			// 				icon: 'success',
			// 				duration: 1000
			// 			});
			// 		}, 1000);

			// 	} else {
			// 		this.show = false;
			// 		this.value = '';
			// 		return uni.showToast({
			// 			title: data.data.message,
			// 			icon: 'error',
			// 			duration: 1500
			// 		});
			// 	}
			// },
			async save() {
				let data = {}
				if (this.istime) {
					data = {
						ischecked: false,
						todocontent: this.value,
						time: this.Alltime,
					}
				} else {
					data = {
						ischecked: false,
						todocontent: this.value
					}
				}
				this.todolist.push(data);
				const result = await uni.$http.post('/update/updatetodolist', {
					todolist: this.todolist
				});

				if (result.data.status === 0) {
					this.updatetodolist(this.todolist);
					this.show = false;
					this.value = '';
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '添加成功!',
							icon: 'success',
							duration: 1000
						});
						if (this.second <= 0) {
							clearInterval(timer);

							return;
						}
						uni.showToast({
							title: '添加成功！',
							icon: 'success',
							duration: 1000
						});
					}, 1000);

				} else {
					this.show = false;
					this.value = '';
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}
			},
			openupdate(index) {
				this.index = index
				this.value1 = this.todolist[index].todocontent
				this.show1 = true
			},
			updateChange(e) {
				this.todolist[this.index].todocontent = e.detail
			},
			async updatesave() {
				const result = await uni.$http.post('/update/updatetodolist', {
					todolist: this.todolist
				})

				if (result.data.status === 0) {
					this.updatetodolist(this.todolist)
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '更新成功!',
							icon: 'success',
							duration: 1000
						});
						if (this.second <= 0) {
							clearInterval(timer)
							this.show1 = false
							return
						}
						uni.showToast({
							title: '更新成功！',
							icon: 'success',
							duration: 1000
						});
					}, 1000)
				} else {
					this.show1 = false
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}
			},
			updateclose() {
				this.show1 = false
				this.value1 = ''
			},
			showtime() {
				this.show2 = true
			},
			choosedate() {
				this.active = 0
			},
			choosetime() {
				this.active = 1
			},
			change(e) {
				this.year = e.year
				this.month = e.month
				this.day = e.date
			},
			onInputtime(e) {
				this.hour = e.detail.split(':')[0]
				this.minute = e.detail.split(':')[1]
			},
			updatetime() {
				this.istime = true
				this.show2 = false
			},
			closetime() {
				this.show2 = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.todo {
		width: 94%;
		border-radius: 50rpx;
		margin-left: 22rpx;
		box-shadow: 0px 0px 24px -1px rgba(0, 0, 0, 0.1);
		margin-top: 30rpx;
		.attention{
			color: #c9d6de;
			margin-left: 70%;
		}
		.todotitle {
			text-align: center;
			font-size: 40rpx;
			color: #f9c00c;
			margin-top: 10rpx;
		}
	}

	.body {
		margin-top: 30rpx;
		height: 600rpx;
		overflow: auto;
		margin-bottom: 20rpx;

		.body_title {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

			.left {
				margin-left: 30rpx;
			}

			.right {
				margin-right: 50rpx;

				.icon {
					margin: 0rpx 30rpx;
				}
			}
		}

		.body_content {
			.todocontent {
				.big {
					// height: 80rpx;

					// margin: 30rpx;
					margin-left: 20rpx;
					padding-top: 20rpx;
					padding-bottom: 8rpx;
					border-bottom: 1px solid #eee;

					.box1 {
						display: flex;
					}

					.todotime {
						color: #c9d6de;
					}
				}

				.small {
					width: 100%;
				}
			}

			.active {
				text-decoration: line-through;
			}
		}
	}

	.addlist {
		background-color: antiquewhite;

		.switch__title {
			display: flex;
			text-align: center;
			margin-top: 30rpx;
			font-size: 40rpx;

			.success {
				flex: 2;
			}

			.title {
				flex: 5;
			}

			.cancel {
				flex: 2;
			}
		}

		.switch__content {
			background-color: #FFFFFF;

			uni-tag {
				margin-left: 20rpx;
				padding-bottom: 5rpx;
			}
		}
	}

	.addtime {
		.title {
			display: flex;
			text-align: center;
			margin-top: 30rpx;
			font-size: 40rpx;

			.success {
				flex: 2;
			}

			.smalltitle {
				flex: 5;
			}

			.cancel {
				flex: 2;
			}
		}

		.content {
			width: 91%;
			height: 900rpx;
			background-color: #FFFFFF;
			margin-top: 30rpx;
			margin-left: 30rpx;
			border-radius: 50rpx;

			.type {
				display: flex;
			}

			.text {
				font-size: 40rpx;
				margin-top: 30rpx;
				margin-left: 30rpx;

			}

			.choose {
				display: flex;
				justify-content: space-around;
				margin-left: 108rpx;
				margin-top: 30rpx;

				.date,
				.time {
					text-align: center;
					line-height: 60rpx;
					border-radius: 40rpx;
					background-color: #E0E3DA;
					height: 60rpx;
					padding: 0rpx 10rpx;
				}

				.clickone {
					background-color: #f9c00c;
				}

				.date {
					margin-right: 30rpx;
				}

				.time {
					width: 100rpx;
				}
			}

			.calendar {
				height: 500rpx;
				width: 95%;
				// overflow: hidden;
			}

			.picker {
				height: 300rpx;
			}
		}
	}
</style>